import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import GlobalStyles from '../style/GlobalStyles';
import ModalView from './base/ModalView';
import Button from './base/Button';
import px from '../utils/px';
import PropTypes from "prop-types";

export default class LoginModal extends Component {
    static propTypes = {
        title: PropTypes.string
    };
    // 显示 Modal
    show() {
        this.modalView && this.modalView.show();
    }

    // 关闭 Modal
    disMiss = () => {
        this.modalView && this.modalView.disMiss();
    };

    render() {
        return (
            <ModalView ref={c => (this.modalView = c)} animationType="fade">
                <View style={styles.mask}>
                    <View style={styles.container}>
                        <Text style={styles.title}>{this.props.title}</Text>
                        <Button.HeightLight
                            title={"确定"}
                            btnStyle={[styles.close]}
                            btnText={[styles.closeText]}
                            onPress={() => setTimeout(() => this.modalView.disMiss())}/>
                    </View>
                </View>
            </ModalView>
        );
    }
}

const styles = StyleSheet.create({
    mask: {
        flex: 1,
        display: 'flex',
        width: GlobalStyles.DEVICE_WIDTH,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    container: {
        overflow: 'hidden',
        width: px(518),
        height: px(228),
        borderRadius: px(8),
        backgroundColor: '#fff'
    },
    title: {
        width: '100%',
        height: px(136),
        textAlign: 'center',
        color: GlobalStyles.TEXT_COLOR,
        lineHeight: px(136),
        borderBottomWidth: px(3),
        fontSize: GlobalStyles.FONT_SIZE,
        borderColor: 'rgb(238,238,238)'
    },
    close: {
        width: '100%',
        height: px(92),
        textAlign: 'center',
        lineHeight: px(92),
        backgroundColor: '#fff',
    },
    closeText: {
        fontSize: GlobalStyles.FONT_SIZE,
        color: GlobalStyles.TEXT_COLOR
    }
});
